<template>
  <div class="container-scope">
    <IForm :formFrame="frame" title="组件配置" labelWidth="100rpx" class="form-container" :formData.sync="form"></IForm>


    <!-- <IForm :formFrame="listFrame" title="选择要编辑的标签" labelWidth="100rpx" class="form-container" v-if="form.list && form.list.length" :formData.sync="otherForm"></IForm> -->
    <div class="select-form-c">
      <div class="title">选择分类页:</div>
      <a-radio-group style="margin-top: 4px;" :defaultValue="0" v-model="currentEditTagIndex">
        <a-radio style="margin-bottom: 10px;" :value="index" v-for="(tag, index) in form.tags">{{tag}}</a-radio>
      </a-radio-group>
    </div>

    <IForm :formFrame="listFrame" title="对应列表编辑" labelWidth="100rpx" class="form-container"
      v-if="form.list && form.list.length" :formData.sync="form.list[currentEditTagIndex]"></IForm>
  </div>
</template>
<script>
  import IForm from "@/components/IForm/IForm"
  export default {
    name: 'searchBar',
    components: {
      IForm
    },
    props: {
      value: {
        type: Object
      }
    },
    data() {
      return {
        currentEditTagIndex: 0,
        frame: [{
            title: '样式',
            type: 'style_input',
            span: '24',
            newline: true,
            tips: '屏幕宽度为750',
            key: 'style',
          },
          {
            title: '分类',
            key: 'tags',
            type: 'tags',
            span: 24,
            default: [],
            // placeholder: '不填写则使用默认',
            newline: true,
            addItem: (index, item) => {
              console.log('add', item)
              this.form.list.splice(index, 0, {})
            },
            deleteItem: (index) => {
              console.log('delete item', index)
              this.form.list.splice(index, 1)
            }
          }
        ],
        form: {
          tags: ['全部'],
          list: [{}]
        },
        listFrame: [{
            title: '排版',
            type: 'radio',
            default: 'grid3',
            tips: '<a target="_blank" href="https://www.yuque.com/u1307645/mwy3k3/rghuol" style="color: red;">点击预览各个布局效果</a>',
            options: [{
                title: '一行1个 (长条状)',
                value: 'row1'
              },
              {
                title: '一行1个（方形状）',
                value: 'grid1'
              },
              {
                title: '一行2个',
                value: 'grid2'
              },
              {
                title: '一行3个',
                value: 'grid3'
              }
            ],
            newline: true,
            required: true,
            key: 'grid',
            span: 24
          },
          // {
          //   title: '排版',
          //   type: 'radio',
          //   default: 'grid1',
          //   span: 24,
          //   options: [
          //     {
          //       title: '一行1个',
          //       value: 'grid1'
          //     },
          //     {
          //       title: '一行2个',
          //       value: 'grid2'
          //     }
          //   ],
          //   newline: true,
          //   key: 'grid',
          //   required: true
          // },
          {
            title: '活动类型',
            type: 'radio',
            default: 'box',
            span: 24,
            options: [{
                title: '盲盒',
                value: 'box'
              },
              {
                title: '一番赏',
                value: 'yifanshang'
              },
              {
                title: '无限赏',
                value: 'infinite_shang'
              },
              {
                title: '抽奖活动',
                value: 'lottery'
              },
              {
                title: '秒杀活动',
                value: 'seckill'
              },
              {
                title: '扭蛋机',
                value: 'egg_lottery'
              },
              {
                title: '福袋',
                value: 'fudai'
              },
              {
                title: '任意门',
                value: 'renyi'
              },
              {
                title: '大乱斗',
                value: 'tuanzhan'
              },
              {
                title: '卡牌社',
                value: 'kapaishe'
              },
              {
                title: '大转盘',
                value: 'rotate_lottery'
              },
              {
                title: '助力活动',
                value: 'zhuli'
              },
              {
                title: '集卡活动',
                value: 'jika'
              },
            ],
            newline: true,
            key: 'activity_type',
            required: true
          },
          {
            title: '换行方式',
            type: 'radio',
            default: 'wrap',
            options: [{
                title: '换行平铺',
                value: 'wrap'
              },
              {
                title: '同一行左右滑动',
                value: 'scroll'
              }
            ],
            tips: '默认为多行平铺布局',
            newline: true,
            required: true,
            key: 'wrap_mode',
          },
          {
            title: '列表内容',
            type: 'radio',
            default: 'custom',
            tips: '如果选择显示“所有上架活动”，需要把此组件作为页面的最后一个组件',
            span: 24,
            options: [{
                title: '所有上架活动',
                value: 'all'
              },
              {
                title: '自定义筛选',
                value: 'custom'
              }
            ],
            newline: true,
            key: 'list_content',
            required: true
          },
          {
            title: '盲盒列表',
            key: 'list',
            type: 'activity_list_input',
            activity_type: 'box',
            where: {
              activity_type: 'box',
              list_content: 'custom'
            },
            span: 24,
            placeholder: '请输入',
            newline: true
          },
          {
            title: '一番赏列表',
            key: 'list',
            type: 'activity_list_input',
            activity_type: 'yifanshang',
            where: {
              activity_type: 'yifanshang',
              list_content: 'custom'
            },
            span: 24,
            placeholder: '请输入',
            newline: true
          },
          {
            title: '无限赏',
            key: 'list',
            type: 'activity_list_input',
            activity_type: 'infinite_shang',
            where: {
              activity_type: 'infinite_shang',
              list_content: 'custom'
            },
            span: 24,
            placeholder: '请输入',
            newline: true
          },
          {
            title: '抽奖列表',
            key: 'list',
            type: 'activity_list_input',
            activity_type: 'lottery',
            where: {
              activity_type: 'lottery',
              list_content: 'custom'
            },
            span: 24,
            placeholder: '请输入',
            newline: true
          },
          {
            title: '秒杀列表',
            key: 'list',
            type: 'activity_list_input',
            activity_type: 'seckill',
            where: {
              activity_type: 'seckill',
              list_content: 'custom'
            },
            span: 24,
            placeholder: '请输入',
            newline: true
          },
          {
            title: '扭蛋机列表',
            key: 'list',
            type: 'activity_list_input',
            activity_type: 'egg_lottery',
            where: {
              activity_type: 'egg_lottery',
              list_content: 'custom'
            },
            span: 24,
            placeholder: '请输入',
            newline: true
          },
          {
            title: '福袋列表',
            key: 'list',
            type: 'activity_list_input',
            activity_type: 'fudai',
            where: {
              activity_type: 'fudai',
              list_content: 'custom'
            },
            span: 24,
            placeholder: '请输入',
            newline: true
          },
          {
            title: '大转盘活动',
            key: 'list',
            type: 'activity_list_input',
            activity_type: 'rotate_lottery',
            where: {
              activity_type: 'rotate_lottery',
              list_content: 'custom'
            },
            span: 24,
            placeholder: '请输入',
            newline: true
          },
          {
            title: '集卡活动',
            key: 'list',
            type: 'activity_list_input',
            activity_type: 'jika',
            where: {
              activity_type: 'jika',
              list_content: 'custom'
            },
            span: 24,
            placeholder: '请输入',
            newline: true
          },
          {
            title: '助力活动',
            key: 'list',
            type: 'activity_list_input',
            activity_type: 'zhuli',
            where: {
              activity_type: 'zhuli',
              list_content: 'custom'
            },
            span: 24,
            placeholder: '请输入',
            newline: true
          },
        ]
      }
    },
    computed: {
      selectForm() {
        return [{
          title: '选择',
          type: 'radio',
          default: 'grid3',
          tips: '<a target="_blank" href="https://www.yuque.com/u1307645/mwy3k3/rghuol" style="color: red;">点击预览各个布局效果</a>',
          options: [{
              title: '一行1个 (长条状)',
              value: 'row1'
            },
            {
              title: '一行1个（方形状）',
              value: 'grid1'
            },
            {
              title: '一行2个',
              value: 'grid2'
            },
            {
              title: '一行3个',
              value: 'grid3'
            }
          ],
          newline: true,
          required: true,
          key: 'grid',
          span: 24
        }, ]
      }
    },
    mounted() {
      this.form = this.value || this.form
    },
    watch: {
      form(val) {
        if (!val.list) {
          this.$set(this.form, 'list', [])
        }
        this.$emit('input', val)
      },
      value(val) {
        this.form = val
      }
    },
    methods: {

    }
  }
</script>
<style lang="less" scoped>
  .form-title {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 110%;
    font-weight: 700;
    background: white;
    padding: 0px 10px;
  }

  .select-form-c {
    border: 1px solid #e1e1e1;
    margin-bottom: 30px;
    position: relative;
    margin-top: 30px;
    padding: 20px 30px;

    .title {
      position: absolute;
      top: -10px;
      left: 10px;
      font-size: 110%;
      font-weight: 700;
      background: white;
      padding: 0px 10px;
    }

  }
</style>
